/* scratch css */
.bg-tint1 {
  background: var(--N1);
}

.bg-tint2 {
  background: var(--N2);
}

.bg-green {
  background: #43af79;
}

.color-white {
  color: white;
  & h1,
  & h2,
  & h3,
  & h4,
  & h5,
  & h6,
  & p {
    color: white;
  }
}

.clearfix {
  &::after,
  &::before {
    content: '';
    clear: both;
    display: table;
  }
}

.bg-dark {
  background: var(--N9);
}

.border-bottom-default {
  border-bottom: 1px solid var(--color-border-default);
}

.border-bottom-muted {
  border-bottom: 1px solid var(--color-border-muted);
}

.focus-ring-link {
  position: relative;

  &:focus-visible::after {
    content: '';
    display: block;
    position: absolute;
    top: -4px;
    left: -6px;
    right: -6px;
    bottom: -4px;
    box-shadow: 0 0 0 2px var(--B6A);
    border-radius: 3px;
  }
}

.focus-ring-link-white {
  position: relative;

  &:focus-visible {
    border-bottom: none;
  }

  &:focus-visible::after {
    content: '';
    display: block;
    position: absolute;
    top: -4px;
    left: -6px;
    right: -6px;
    bottom: -4px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
    border-radius: 3px;
  }
}
